<template>
	<view>
		<u-navbar title="添加账号" title-color="#333"></u-navbar>
		<view class="flex-col page">
		  <!-- <navbar title="添加账号" isback="{{true}}"></navbar> -->
		  <view class="flex-col group">
		    <text class="self-start text">设备绑定</text>
		    <text class="self-start font text_2">请填写设备信息完成绑定</text>
		  </view>
		  <view class="flex-col group_2">
		    <text class="self-start font_2 text_3">设备类型</text>
		    <view @click="selectEqType" class="flex-col justify-start items-start self-stretch text-wrapper mt-9-5">
		      <text class="font text_4">{{eqType != '' ? eqType : '请选择设备(必填)'}}</text>
		    </view>
		  </view>
		  <view class="flex-col group_2">
		    <text class="self-start font_2 text_3">常用登录地址（如没有 选择就近）</text>
		    <view @click="selectAdd" class="flex-col justify-start items-start self-stretch text-wrapper mt-9-5">
		      <text class="font text_4">{{address != '' ? address : '请选择设备地址'}}</text>
		    </view>
		  </view>
		  <view class="flex-col group_2">
		    <text class="self-start font_2 text_3">设备id</text>
		    <view class="flex-col justify-start items-start self-stretch text-wrapper mt-9-5">
		      <!-- <van-field
		    value="{{ DeviceID }}"
		    placeholder="设备id为空时为新设备,请谨慎登录"
		    border="{{ false }}"
		    bind:change="changeDeviceID"
		  /> -->
		      <input class="font text_4" v-model="DeviceID" type="text" placeholder="设备id为空时为新设备,请谨慎登录"/>
		    </view>
		  </view>
		  <view class="flex-col group_3">
		    <text class="self-start font_2 text_5">备注</text>
		    <view class="mt-10 flex-col self-stretch">
		      <view class="flex-col justify-start items-start text-wrapper">
		        <input v-model="notes" class="font text_4" type="text" placeholder="请输入备注信息（选填）"/>
		      </view>
		      <view class="flex-col section_2 mt-17">
		        <view class="flex-row items-center group_4">
		          <image
		            class="image_4"
		            src="@/static/image/haoduogeni/error-icon.png"
		          />
		          <text class="font text_6 ml-3">扫码后系统只获取</text>
		        </view>
		        <view class="mt-8 flex-row items-center group_4">
		          <image
		            class="image_5"
		            src="@/static/image/haoduogeni/checked-icon.png"
		          />
		          <text class="ml-4 font_3 text_7">扫码后系统只获取</text>
		        </view>
		        <view class="mt-8 flex-row items-center group_4">
		          <image
		            class="image_5"
		            src="@/static/image/haoduogeni/checked-icon.png"
		          />
		          <text class="ml-4 font_3 text_8">好友自动验证能力</text>
		        </view>
		      </view>
		    </view>
		  </view>
		  <view @click="getCodeBtn" class="flex-row justify-center section_3">
		    <image
		      class="image_6"
		      src="@/static/image/haoduogeni/wechat-icon.png"
		    />
		    <text class="text_9 ml-8-5">微信扫码登录</text>
		  </view>
		</view>
		<selectEqType ref="selecteqtype" @confirm="confirmEqType"></selectEqType>
		<scanCode v-if="codeShow" :codeId="codeId" :QrCode="QrCode" :uuid="uuid" :show="codeShow" @loginSuccess="loginSuccess"></scanCode>
		
		<selectAddress ref="selectaddress" @confirm="confirmAddress"></selectAddress>

	</view>
</template>

<script>
	import { getCodeIpad, carGetQrcode } from '../../haoduogeni/common/api/send';
	import selectEqType from "../../haoduogeni/components/selectEqType/index.vue";
	import selectAddress from "../../haoduogeni/components/selectAddress/index.vue";
	import scanCode from "../../haoduogeni/components/scanCode/index.vue";
	export default {
		data() {
			return {
				isCheched: false,
				    codeShow: false,
				    selectAddressShow: false,
				    address: '',//地址
				    notes: '',//备注
				    uid: '',//pc端uid
				    codeId: '',//绑定id
				    group_id: "",//分组id
				    DeviceID: "",//设备id
				    QrCode: "",//二维码
				    uuid: "",//检测uuid
				    selectEqTypeShow: false,
				    eqType: '通道1(默认推荐)',
				    login_type: 1,//1ipad 2车载
				    isLoading: false,
			}
		},
		components: {
			selectEqType,
			selectAddress,
			scanCode
		},
		onLoad(options) {
		    console.log(options,'options')
		    if(options.obj){
		      var obj = JSON.parse(options.obj)
		      console.log(obj,'11111111111')
		        this.uid = obj.uid;
		        this.codeId = obj.id;
		        this.DeviceID = obj.DeviceId;
		        this.address = obj.address;
		        this.notes = obj.notes;
		        this.login_type = obj.login_type;
		        this.eqType = obj.login_type == 1 ? '通道1(默认推荐)' : '通道2';
		      
		    }else {
		      console.log('22222222222')
		      
		        this.uid = options.uid;
		        this.codeId = options.id;
		      
		    }
		    
		  },
		methods: {
			selectAdd(){
				this.$refs.selectaddress.open();
			    // this.selectAddressShow = true;
			    
			  },
			  selectEqType(){
			    this.$refs.selecteqtype.open();
			    // this.selectEqTypeShow = true;
			    
			    
			  },
			  loginSuccess(){
			    uni.reLaunch({
			      url: '/haoduogeni/mine/index',
			    })
			  },
			  confirmAddress(e){
			    this.address = e;
			      
			    },
			    confirmEqType(e){
			      
					this.eqType = e.label;
					this.login_type = e.value;
			      
			    },
			    changeNotes(e){
			      console.log(e,'eeeee')
			      
			        this.notes = e.detail.value;
			      
			    },
			    changeDeviceID(e){
			      console.log(e,'eeeee')
			      
			        this.DeviceID = e.detail.value;
			      
			    },
			    getCodecIpad(){
			      getCodeIpad({
			        uid: this.uid,
			        DeviceID: this.DeviceID,
			        group_id:  this.group_id,
			        address: this.address,
			        title: this.notes,
			      }).then(res => {
			        //成功时回调函数
			          console.log(res,'getCodeIpad')
			          if(res.errno == 0){
			            this.isLoading = false;
			            uni.hideLoading();
			            
						// this.$refs.scancode.open();
			            this.QrCode = res.data.QrBase64;
			            this.uuid = res.data.Uuid;
						this.codeShow = true;
			            
			          }else {
			            this.isLoading = false;
			            uni.hideLoading();
			            uni.showToast({
			              title: res.msg,
			              icon: 'none'
			            })
			          }
			        }).catch(err => {
			        //失败时回调函数
			          console.log(err)
			          this.isLoading = false;
			          uni.hideLoading();
			        })
			    },
			    getCodeCar(){
			      carGetQrcode({
			        uid: this.uid,
			        DeviceID: this.DeviceID,
			        group_id:  this.group_id,
			        address: this.address,
			        title: this.notes,
			      }).then(res => {
			        //成功时回调函数
			          console.log(res,'getCodeIpad')
			          if(res.errno == 0){
			            this.codeShow = true;
			            this.QrCode = res.data.QrBase64;
			            this.uuid = res.data.Uuid;
			            this.isLoading = false;
			            uni.hideLoading();
			          }else {
			            this.isLoading = false;
			            uni.hideLoading();
			            uni.showToast({
			              title: res.msg,
			              icon: 'none'
			            })
			          }
			        }).catch(err => {
			        //失败时回调函数
			          console.log(err)
			          this.isLoading = false;
			          uni.hideLoading();
			        })
			      
			    },
			    getCodeBtn(){
			      if(this.isLoading){
			        uni.showToast({
			          title: '请勿重复点击',
			          icon: 'none'
			        })
			        return 
			      }
			      uni.showLoading({
			        title: '加载中',
			      })
			      this.isLoading = true;
			      if(this.login_type == 1){
			        this.getCodecIpad()
			      }else {
			        this.getCodeCar()
			      }
			    },
		}
	}
</script>

<style lang="less" scoped>
@import url("../common/css/common.css");
.ml-12-5 {
  margin-left: 25rpx;
}
.mt-9-5 {
  margin-top: 19rpx;
}
.mt-17 {
  margin-top: 34rpx;
}
.ml-3 {
  margin-left: 6rpx;
}
.ml-8-5 {
  margin-left: 17rpx;
}
.ml-7-5 {
  margin-left: 15rpx;
}
.page {
  padding: 0rpx 15rpx 374rpx 30rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-left: 11rpx;
}
.image {
  margin-left: 26rpx;
  margin-right: 13rpx;
  width: 655rpx;
  height: 24rpx;
}
.section {
  margin-top: 37rpx;
  padding: 11rpx 25rpx 14rpx;
  background-color: #ffffffba;
  border-radius: 32rpx;
  width: 174rpx;
  border-left: solid 1rpx #eaeaea;
  border-right: solid 1rpx #eaeaea;
  border-top: solid 1rpx #eaeaea;
  border-bottom: solid 1rpx #eaeaea;
}
.image_2 {
  width: 61rpx;
  height: 37rpx;
}
.image_3 {
  width: 34rpx;
  height: 34rpx;
}
.text {
  margin-top: 24rpx;
  color: #000000;
  font-size: 44rpx;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 42rpx;
}
.font {
  font-size: 28rpx;
  font-family: PingFang SC;
  line-height: 27rpx;
  color: #999999;
}
.text_2 {
  margin-left: 6rpx;
  margin-top: 29rpx;
}
.group_2 {
  margin-top: 76rpx;
}
.font_2 {
  font-size: 28rpx;
  font-family: PingFang SC;
  line-height: 27rpx;
  color: #1f2937;
}
.text_3 {
  margin-left: 9rpx;
}
.text-wrapper {
  margin-right: 14rpx;
  padding: 38rpx 0 41rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  border-left: solid 1rpx #e3e3e3;
  border-right: solid 1rpx #e3e3e3;
  border-top: solid 1rpx #e3e3e3;
  border-bottom: solid 1rpx #e3e3e3;
}
.text_4 {
  margin-left: 28rpx;
  width: 100%;
}
.group_3 {
  margin-top: 50rpx;
}
.text_5 {
  margin-left: 9rpx;
}
.section_2 {
  margin-right: 14rpx;
  padding: 28rpx 35rpx;
  border-radius: 16rpx;
  background-image: url('https://ide.code.fun/api/image?token=689552fdd26a7d0011a60701&name=569beb4cd4f9342350089026eb03d2c4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_6 {
  color: #333333;
}
.group_4 {
  padding: 0 2rpx;
}
.image_5 {
  width: 30rpx;
  height: 30rpx;
}
.font_3 {
  font-size: 24rpx;
  font-family: PingFang SC;
  line-height: 22rpx;
  color: #666666;
}
.text_7 {
  line-height: 23rpx;
}
.text_8 {
  line-height: 23rpx;
}
.section_3 {
  margin-right: 15rpx;
  margin-top: 57rpx;
  padding: 32rpx 0 35rpx;
  background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
  border-radius: 48rpx;
}
.image_6 {
  width: 36rpx;
  height: 29rpx;
}
.text_9 {
  color: #ffffff;
  font-size: 30rpx;
  font-family: PingFang SC;
  line-height: 28rpx;
}
.group_5 {
  margin-top: 73rpx;
  padding: 0 100rpx;
}
.image_7 {
  width: 31rpx;
  height: 31rpx;
}
.group_6 {
  line-height: 22rpx;
  height: 22rpx;
}
.font_4 {
  font-size: 22rpx;
  font-family: PingFang SC;
  line-height: 22rpx;
  color: #777777;
}
.font_5 {
  font-size: 22rpx;
  font-family: PingFang SC;
  line-height: 22rpx;
  color: #07c160;
}
.text_10 {
  line-height: 21rpx;
}
.image_4 {
  width: 32rpx;
  height: 32rpx;
}
.image_8 {
  margin-left: 4rpx;
}

</style>
